<template>
  <view class="page">
    <!-- 顶部 Navbar -->
    <view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-title">首页</view>
    </view>

    <!-- 搜索框 -->
    <view
        class="search-box"
        :style="{
        transform: `scale(${searchScale}) translateY(${searchTranslateY}px)`,
        opacity: searchOpacity
      }"
    >
      <view class="search-input">
        <text class="icon">🔍</text>
        <input type="text" placeholder="搜索商品 / 店铺" />
      </view>
    </view>

    <!-- 内容区 -->
    <scroll-view
        class="content"
        scroll-y
        :scroll-top="scrollTop"
        @scroll="handleScroll"
    >
      <view v-for="i in 30" :key="i" class="list-item">
        内容 {{ i }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20;

// 滚动相关
const scrollTop = ref(0);

// 搜索框动画状态
const searchScale = ref(1); // 缩放比例
const searchTranslateY = ref(0); // 垂直位移
const searchOpacity = ref(1); // 透明度

// 固定参数
const MAX_SCROLL = 100; // 滚动超过 100px 完全吸顶
const MAX_TRANSLATE = -35; // 向上平移距离
const MIN_SCALE = 0.7; // 最小缩放

const handleScroll = (e: any) => {
  scrollTop.value = e.detail.scrollTop;

  // 限制范围
  const ratio = Math.min(e.detail.scrollTop / MAX_SCROLL, 1);

  // 动态计算动画参数
  searchScale.value = 1 - ratio * (1 - MIN_SCALE);
  searchTranslateY.value = ratio * MAX_TRANSLATE;
  searchOpacity.value = 1 - ratio * 0.2; // 滚动时稍微透明
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f6f7;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-box {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  padding: 0 16px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 998;
}

.search-input {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 8px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 14px;
}

.search-input .icon {
  margin-right: 8px;
  font-size: 16px;
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
}

.content {
  margin-top: 100px;
  flex: 1;
}

.list-item {
  height: 60px;
  margin: 8px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
</style>
